<template>
  <div class="app-container" style="width: 40%">
    <el-form :rules="rules" ref="form" :model="repairRecord"  label-width="80px">

      <el-form-item label="车  牌  号:">
        <el-select  v-model="repairRecord.carId" disabled placeholder="请选择车牌号" label-width="150px">
          <el-option
            v-for="(citem,cindex) in carList"
            :key="cindex"
            :label="citem.carNo"
            :value="citem.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修   理   厂:">
        <el-select  v-model="repairRecord.repairDepotId" disabled placeholder="请选择修理厂" label-width="80px">
          <el-option
            v-for="(uitem,uindex) in unitList"
            :key="uindex"
            v-if="uitem.remarks === '修理'"
            :label="uitem.unitName"
            :value="uitem.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="维修类别"  prop="repairType">
        <el-select  v-model="repairRecord.repairType"  placeholder="维修类别" label-width="80px">
          <el-option
            v-for="(uitem,uindex) in repairTypeList"
            :key="uindex"
            v-if="(uitem.pid ===39)&&(uitem.isdisable == 1)"
            :label="uitem.text"
            :value="uitem.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="送修时间"  >
        <div class="block"  label-width="80px">
          <el-date-picker
            v-model="repairRecord.sendTime"
            type="date"
            disabled
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="取车时间" prop="getTime">
        <div class="block"  label-width="80px">
          <el-date-picker
            :picker-options="pickerOptionsStart"
            v-model="repairRecord.getTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="花费金额" prop="repairCost">
        <el-input-number v-model="repairRecord.repairCost" :precision="2" :min="0.00" :max="10000.00" ></el-input-number>
      </el-form-item>

      <el-form-item label="维修项目" prop="repairOption">
        <el-input v-model="repairRecord.repairOption"></el-input>
      </el-form-item>
      <el-form-item label="使用材料" prop="useStuff">
        <el-input v-model="repairRecord.useStuff"></el-input>
      </el-form-item>
      <el-form-item label="取车备注" prop="getRemarks">
        <el-input v-model="repairRecord.getRemarks" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="save('form')"
        >保存</el-button>
        <el-button type="danger" @click="jumpBack"
        >取消</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import api_repair from "@/api/repair_record.js";

  export default {
    name: "add_repair_record",

    data() {
      return {
        carList:[],
        unitList: [],
        usersList: [],
        repairTypeList: [],
        recordInfo: '',
        repairRecord: {
          carId: '',
          repairDepotId: '',
          sendTime: '',
          estimateTime: '',
          sendReason: '',
          sendRemarks: '',
          operator: '',
          repairCost: '',
          getTime: '',
          useStuff: '',
          getRemarks: '',
          repairOption: '',
          repairType: '',

        },
        rules: {
          repairType: [{ required: true, message: '请选择维修类别', trigger: 'change'}],
          getTime: [{ required: true, message: '请选择取车时间', trigger: 'change'}],
          repairCost: [{ required: true, message: '请填写花费金额', trigger: 'change'}],
          repairOption: [{ required: true, message: '请填写维修项目', trigger: 'change'}],
          useStuff: [{ required: true, message: '请填写维修材料', trigger: 'change'}],
          getRemarks: [{ required: true, message: '请填写取车备注', trigger: 'change'}],
        },
        pickerOptionsStart: {
          disabledDate: (time) => {
            if (this.repairRecord.sendTime) {
              return (
                time.getTime() <
                new Date(
                  this.repairRecord.sendTime
                ).getTime()
              );
            }
          }
        }
      }
    },
    created() {
      this.init();
g    },
    watch: {
      $route(to, form) {
        this.init();
      },
    },
    methods: {
      init(){
        const id = this.$route.params.id;
        this.getList();
        this.getById(id)
      },
      getById(id){
        api_repair.getById(id)
          .then(Response => {
            this.repairRecord = Response .data.repairRecord
            this.repairTypeList = Response.data.repairTypeList
          })
      },
      save(name1) {
        this.$refs[name1].validate((valid) => {
          if (valid) {
            api_repair.saveRecord(this.repairRecord)
              .then(Response => {
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                this.$router.push({path: "/daily_work/repair_record"});
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getList(){
        api_repair.getAddList()
          .then(Response => {
            this.carList = Response.data.carList;
            this.unitList = Response.data.unitList;
            this.usersList = Response.data.usersList;
          })
      },
      jumpBack() {
        this.$router.push({path: "/daily_work/repair_record"});
      }
    }
  };
</script>
<style>
</style>
